<template>
    <div style="width: 100%" v-loading="loading" >

        <div id="video1"></div>
        <video :poster="pic"   id="v1" autobuffer="true" data-setup="{}"  width="672" height="510" v-if="playerurl!=null" >
            <source :src="playerurl.durl[0].url" type="video/mp4"/>
            您的浏览器不支持HTML5视频
        </video>
    </div>
</template>

<script>
    import {movieApi} from '../apis/movie.js';

    //视频分P页面
    export default {
        data () {
            return {
                loading :true,
                playerurl : null
            }
        },
        mounted() {

            movieApi.getMoviePlayerUrl(this.$vnode.data.attrs.cid)
                    .then(function (ret) {

                            this.cid =this.$vnode.data.attrs.cid;
                            this.playerurl =ret;
                            this.loading=false;
                            this.pic =this.$vnode.data.attrs.pic

                            this.renderVideo()
                    }.bind(this))
        },
        watch: {
            '$route' (to, from) {
                // 对路由变化作出响应...

            },
            '$vnode' (to, from) {
                this.loading =true;
                movieApi.getMoviePlayerUrl(to.data.attrs.cid)
                        .then(function (ret) {

                            this.cid =to.data.attrs.cid;
                            this.playerurl =ret;
                            this.loading=false;


                        }.bind(this))
            }
        },
        methods:{


            renderVideo(){
                if(document.getElementById("video1") &&
                        document.getElementById("v1")
                ){
                    var inst1 = ABP.create(document.getElementById("video1"), {
                        "src":document.getElementById("v1"),
                        "mobile":false
                    });
                    (new CommentLoader(inst1.cmManager)).setParser(BilibiliParser).load("GET", "http://comment.bilibili.cn/"+this.cid+".xml");
                }else{
                    var me=this ;
                    setTimeout(()=>{me.renderVideo();},500)
                }
            }
        }
    }

</script>


<style>
</style>